HTML Basics
HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.
What Is HTML?
HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
The main parts of our element are as follows:
1. The opening tag:
This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
2. The closing tag:
This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
3. The content:
This is the content of the element, which in this case, is just text.
4. The element:
The opening tag, the closing tag, and the content together comprise the element.
CSS Flexbox
CSS Flexbox is a layout model that allows items in a container to align and distribute space efficiently. It's great for responsive designs.
1. Layout Module:
Before the Flexbox Layout module, there were four layout modes:
• Block: for sections in a webpage
• Inline: for text
• Table: for two-dimensional table data
• Positioned: for explicit position of an element
2. Browser Support:
The flexbox properties are supported in all modern browsers:
• Chrome
• Edge
• Safari
• Firefox
CSS Grid
CSS Grid Layout is a two-dimensional layout system for the web. It lets you design web pages by placing items in rows and columns.
1. Grid Layout:
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning
2. Grid Elements:
A grid layout consists of a parent element, with one or more child elements.
3. Display Property:
An HTML element becomes a grid container when its display property is set to grid or inline-grid.